<template>
  <!-- 新碟 -->
  <div class="playlist-item-box">
    <div class="playlist-cover">
      <a href="javascript:;" @click="clickAlbumDetail(item.id)">
        <img class="playlist-pic" :src="item.picUrl" :alt="item.name" />
        <i class="mod-cover-mark"></i>
        <i class="mod-cover-icon-play"></i>
      </a>
    </div>
    <h4 class="playlist-title">
      <a
        href="javascript:;"
        class="playlist-title-txt"
        :title="item.name"
        @click="clickAlbumDetail(item.id)"
      >
        {{ item.name }}
      </a>
    </h4>
    <h4 class="playlist-author">
      <a
        v-for="(artist, n) in item.artists"
        :key="n"
        href="javascript:;"
        :title="artist.name"
        @click="clickArtistDetail(artist.id)"
      >
        <i v-if="n > 0"> / </i>
        {{ artist.name }}
      </a>
    </h4>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  mounted() {
    // console.log(this.item);
  },
  methods: {
    clickArtistDetail(id) {
      this.playArtistDetail(id);
    },
    clickAlbumDetail(id) {
      this.playAlbumDetail(id);
    },
  },
};
</script>

<style>
</style>